<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<c:set var="base" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>用户管理</title>
  <link href="${base}/assets/css/public.css" rel="stylesheet">
  <link href="${base}/assets/css/list.css" rel="stylesheet">
  <script src="${base}/assets/js/jquery.min.js"></script>
</head>
<body>

<div class="top">
   <c:import url="../commons/top.jsp"/>
</div>
<div class="wrap">
  <div class="side">
   <c:import url="../commons/sidebar.jsp"/>
  </div>
  <div class="cont">
    <div class="bread">
      <span>用户列表</span>
      <div class="excel-add">
        <a class="add" href="${base}/back/useraddShow.do" >+添加</a>
      </div>
      <div class="clear"></div>
    </div>
    <table width="100%" border="1" cellspacing="0" cellpadding="0" bordercolor="#d8d8df" class="list" id="sample_editable_1">
      <thead>
        <tr style="background-color:#ccc;">
           <th>车间名称</th>
           <th>用户账号</th>
           <th>用户姓名</th>
           <th>联系方式</th>
           <th>账号备注</th>
           <th>操       作</th>
       </tr>
      </thead>
      <tbody>
      <c:forEach items="${users}" var="user">
      	<tr style="background-color:rgba(226, 223, 223);">
        	<td>${user.workname}</td> 
        	<td>${user.uacc}</td>
        	<td>${user.uname}</td>
        	<td>${user.uphone}</td>
       		<td>${user.remark}</td>
       		<td><a href="${base}/back/usermodShow.do?uid=${user.uid}" >编辑</a>
       			<a href="${base}/back/userdel.do?uid=${user.uid}" style="background-color:#337ab7">删除</a>
       		</td> 
     	</tr>
      </c:forEach>
      </tbody>
    </table>
    <div id="pageshow">
		<a id="btn0"  style="font-size: 16px;margin-right:15px;"></a>
		<a href="#" id="btn1"  title="首页" style="font-size: 18px;margin-right:15px;"> << </a>
		<a href="#" id="btn2"  title="上一页" style="font-size: 18px;margin-right:15px;"> < </a>
		<div id="pagenum" ></div>
			<a href="#" id="btn3"  title="下一页" style="font-size: 18px;margin-right:15px;"> > </a>
			<a href="#" id="btn4"  title="末页" style="font-size: 18px;margin-right:15px;"> >> </a>
			<a id="sjzl"  style="font-size: 16px;"></a>
 		</div>
  </div>  
  <div class="clear"></div>
</div>

<script type="text/javascript">
$(function () {
	$('.btn-site ul li').click(function () {
    	$(this).addClass('on').siblings().removeClass('on');
	});
})
var pageSize = 10;    //每页显示的记录条数
	var curPage=0;        //当前页
	var lastPage;        //最后页
	var direct=0;        //方向
	var len;            //总行数
	var page;            //总页数
	var begin;
	var end;
	var pagetag = new Array();
	display();
	
  function display(){
		
	    len =$("#sample_editable_1 tr").length - 1;    // 求这个表的总行数，剔除第一行介绍
	    page= (len % pageSize==0) ? (len/ pageSize): (Math.floor(len/pageSize)+1);//根据记录条数，计算页数
	    //alert("page==="+page);
	    curPage=1;    // 设置当前为第一页
	    
	    for (var i = 1; i <= page; i++) {
			$("#pagenum").append('<button id="dqjm_'+i+'" style="font-size: 14px">' + i + '</button>&nbsp;');
			$("#dqjm_" + i).hide();
		}
		$("#dqjm_" + curPage).css({'background-color':'#0086ff'});

		for (var i = curPage; i <= page; i++) {
			if(i<curPage + pageSize){
				$("#dqjm_" + i).show();
				pagetag.push(i);
			}
		}
		if(pagetag.length<pageSize){
			var nednum = pageSize - pagetag.length;
			for (var k=1; k <= nednum;k++) {
					$("#dqjm_" + (curPage-k)).show();
					pagetag.splice(0,0,(curPage-k));	
			}
		}
		
	    displayPage(1);//显示第一页
	
	    $("#btn0").html("第 " + curPage + "页" +"   共"+ page + "页 ");    // 显示当前多少页
	    $("#sjzl").html("共计" + len + "条");        // 显示数据量
	   /*  document.getElementById("pageSize").value = pageSize; */   
 }
  
  $("#btn1").click(function firstPage(){    // 首页
      curPage=1;
      direct = 0;
      $("#pageNo").val(curPage.toString());
      displayPage();
  });
  $("#btn2").click(function frontPage(){    // 上一页
      direct=-1;
      displayPage();
      var tt = pagetag[0];
		if( tt != 1){
			$("#dqjm_" + (tt - 1)).show();
			pagetag.pop();
			pagetag.splice(0,0,tt - 1);
		}
		$("#pagenum > button").each(function (i){
      	var sidx = parseInt(this.innerHTML);
      	if(curPage != sidx) $(this).css({'background-color':''});
      });
      $("#dqjm_" + curPage).css({'background-color':'#0086ff'});
		for (var j = curPage; j <= page; j++) {
			if(jQuery.inArray( j,pagetag)>=0){
				$("#dqjm_" + j).show();
			}else{
				$("#dqjm_" + j).hide();
			}
			
		}
  });
  $("#btn3").click(function nextPage(){    // 下一页
  	
      direct=1;
      displayPage();
      if(pagetag[pagetag.length -1] != page){
			$("#dqjm_" + pagetag[0]).hide();
			pagetag.shift();
			pagetag.push(pagetag[pagetag.length -1]+1);
		}
      $("#pagenum > button").each(function (i){
      	var sidx = parseInt(this.innerHTML);
      	if(curPage != sidx) $(this).css({'background-color':''});
      });
      $("#dqjm_" + curPage).css({'background-color':'#0086ff'});
		for (var j = curPage; j <= page; j++) {
			if(jQuery.inArray( j,pagetag)>=0){
				$("#dqjm_" + j).show();
			}else{
				$("#dqjm_" + j).hide();
			}
			
		}
  });
  $("#btn4").click(function lastPage(){    // 尾页
      curPage=page;
      direct = 0;
      $("#pageNo").val(curPage.toString());
      displayPage();
  }); 
  $("#pagenum > button").click(function firstPage(){    // 首页

  	var idx = parseInt(this.innerHTML); 
      curPage=idx;
      $(this).css({'background-color':'#0086ff'});
      $("#pagenum > button").each(function (i){
      	var sidx = parseInt(this.innerHTML);
      	if(idx != sidx) $(this).css({'background-color':''});
      });
      //direct = 0;
      $("#pageNo").val(curPage.toString());
      
      document.getElementById("btn0").innerHTML="第 " + curPage + "页" +"   共"+ page + "页 ";        // 显示当前多少页
  	
	    begin=(curPage-1)*pageSize + 1;// 起始记录号
	    end = begin + 1*pageSize - 1;    // 末尾记录号
	
	    if(end > len ) end=len;
	    $("#sample_editable_1 tr").hide();    // 首先，设置这行为隐藏
	    $("#sample_editable_1 tr").each(function(i){    // 然后，通过条件判断决定本行是否恢复显示
	        if((i>=begin && i<=end) || i==0 )//显示begin<=x<=end的记录
	            $(this).show();
	    });
  });
	function displayPage(){
	    if(curPage <=1 && direct==-1){
	        direct=0;
	        alert("已经是第一页了");
	        return;
	    } else if (curPage >= page && direct==1) {
	        direct=0;
	        alert("已经是最后一页了");
	        return ;
	    }
	
	    lastPage = curPage;
	
	    // 修复当len=1时，curPage计算得0的bug
	    if (len > pageSize) {
	        curPage = ((curPage + direct + len) % len);
	        $("#pageNo").val(curPage.toString());
	    } else {
	        curPage = 1;
	        $("#pageNo").val(curPage.toString());
	    }
	    document.getElementById("btn0").innerHTML="第 " + curPage + "页" +"   共"+ page + "页 ";        // 显示当前多少页
	
	    begin=(curPage-1)*pageSize + 1;// 起始记录号
	    end = begin + 1*pageSize - 1;    // 末尾记录号
	
	    if(end > len ) end=len;
	    $("#sample_editable_1 tr").hide();    // 首先，设置这行为隐藏
	    $("#sample_editable_1 tr").each(function(i){    // 然后，通过条件判断决定本行是否恢复显示
	        if((i>=begin && i<=end) || i==0 )//显示begin<=x<=end的记录
	            $(this).show();
	    });
	
	}
</script>
</body>
</html>